<template>
	<view :style="{'--color':color}">
		
		<view class="row paly" v-if="playInfo.video && playInfo.free ==1 || playInfo.video && playInfo.is_buy ==1">
			<image :src="$imgUrls(playInfo.img)" mode="aspectFill" class="playImg auto" v-if="playInfo.img"></image>
			<view class="row j-centert color_33 size30 m-top40">《{{playInfo.chapter_title}}》</view>
			<view class="row j-centert a-center color_66 m-top10">
				<view class="iconfont icon-shouting size30 "></view>
				<text class="size28 m-left10">{{playInfo.play}}</text>
			</view>
			<view class="row j-centert color h6 m-top10" v-if="playInfo.expire_at">有效期：{{playInfo.expire_at}}</view>
			
			<view class="row p-left40 p-right40 m-top50">
				<slider :min="0" :max="playInfo.seconds" :value="current" 
				        :activeColor="color" 
						:block-size="12" 
						:block-color="color"
						@changing="seek = true"
						@change="audioChange"
						class="slider"></slider>
			</view>
			<view class="row j-sb a-center p-left40 p-right40 h6 color_66">
				<text>{{$format(current)}}</text>
				<text>{{$format(playInfo.seconds)}}</text>
			</view>
			<view class="row j-centert p-left40 p-right40 m-top40 p-re">
				 <view class="d-flex a-center">
					 <view class="d-flex a-center" :class="prev?'color_66':'color_cc'" 
					      @click="prevBtn">
						 <view class="iconfont icon-a-RectangleCopy1 size28"></view>
						 <view class="iconfont icon-a-RectangleCopy1 size28"></view>
					 </view>
					 <view class="Btn flexac" @click="isPlay" >
						 <view class="iconfont  white size30" 
						     :class="musicState?'icon-24gf-pause2':'icon-Rectangle'"></view>
					 </view>
					 <view class="d-flex a-center" :class="next?'color_66':'color_cc'" 
					      @click="nextBtn">
						 <view class="iconfont icon-a-RectangleCopy size28 "></view>
						 <view class="iconfont icon-a-RectangleCopy size28 "></view>
					 </view>
				 </view>
				 
				 <view class="Double d-flex f-column a-center" @click="show = true">
					 <view class="speed p-re">
						 <image :src="$online('speed.png')" mode="widthFix" class="rows"></image>
						 <text class="speedNum color_33 h7">{{speed}}X</text>
					 </view>
					 <text class="color_33 h7 m-top10">倍速选择</text>
				 </view>
			</view>
		</view>
		<image :src="$imgUrls(playInfo.img)" mode="widthFix" class="rows" v-else></image>
		
		
		<u-popup :show="show" 
		         mode="bottom" 
				 :round="10" 
				 closeable 
				 bgColor="#ffffff"
				 @close="show = false"
				 :closeOnClickOverlay="false">
				 <view class="row padding30">
					 <view class="color_33 size30 bold m-bot20">倍速播放{{speed}}X</view>
					 <view class="row j-sb p-top20 p-bot20 bot_bor" 
					       v-for="(item,index) in speedList" :key="index"
						   @click="playbackRateBtn(item)">
						 <text class="color_33 h6">{{item}}X</text>
						 <view class="select flexac" :class="{'selActive':item == speed}">
							 <view class="iconfont icon-xuanzhong h7 white"></view>
						 </view>
					 </view>
				 </view>
		</u-popup>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		name:"playAudio",
		
		data() {
			return {
				speed:1.0,
				speedList:['0.5','0.8','1.0','1.25','1.5','2.0'],
				show:false,
				imgUrl:this.imgUrl,
				bgAudioManager:getApp().globalData.bgAudioManager,
				seek: false ,//是否处于拖动状态
				prev:true,
				next:true,
				numIndex:0,
				ChapLengt:0,
			};
		},
		
		mounted() {
			this.onTimeUpdate();
			this.onEnded();
			this.onStop();
			this.onPause();
		},
		methods:{
			...mapMutations(['setChapter_id','setPlayInfo','setState','setCurrent']),
			setMusic(){
				let info = this.playInfo;
				if(!info) return;
				this.setState(true);
				this.bgAudioManager.title = info.chapter_title;
				this.bgAudioManager.coverImgUrl = this.$imgUrls(info.img);
				this.bgAudioManager.src = info.video;
				this.bgAudioManager.duration = info.seconds; // 音频总长
				this.bgAudioManager.startTime = this.current >=0?this.current:info.chapter_play_time;  // 音频开始播放位置
				this.bgAudioManager.paused = this.musicState;  // 是否暂停或停止
				this.bgAudioManager.playbackRate = this.speed;  // 播放的倍率   可取值：0.5/0.8/1.0/1.25/1.5/2.0
			},
			isPlay(){
				if(this.times > 1){
					this.setCurrent(0);
					this.setPlayInfo({times:1});
					this.setMusic();
					return 
				} 
				this.bgAudioManager.paused?this.bgAudioManager.play():this.bgAudioManager.pause();
				this.setState(this.bgAudioManager.paused)
			},
			onTimeUpdate(){
				this.bgAudioManager.onTimeUpdate(()=>{
					if(this.seek) return;
					 this.setCurrent(this.bgAudioManager.currentTime)
				})
			},
			
			onEnded(){
				let info = this.pageData;
				this.bgAudioManager.onEnded(()=>{
					this.setState(false);
					this.setPlayInfo({times:2});
					this.$saveChap(this.chapterId,this.playInfo.seconds);
				})
			},
			
			onStop(){
				this.bgAudioManager.onStop(()=>{
					this.$saveChap(this.chapterId,this.current);
				})
			},
			onPause(){
				this.bgAudioManager.onPause(()=>{
					this.$saveChap(this.chapterId,this.current);
				})
			},
			
			
			
			
			audioChange(e){
				this.bgAudioManager.seek(e.detail.value);
				this.setCurrent(e.detail.value);
				this.seek = false;
				if(this.bgAudioManager.paused){
					this.setMusic();
					return;
				};
			},
	
	
	
			playbackRateBtn(item){
				this.bgAudioManager.pause()
				this.bgAudioManager.playbackRate = parseFloat(item);
				this.speed = parseFloat(item);
				this.setMusic();
				this.show = false;
			},
			
			prevBtn(){
				let Index = this.numIndex;
				let arr = this.playInfo.chapter_list.filter(n=>n.is_buy == 1 || n.free == 1);
				if(Index == 0) return;
				this.$emit('switchPlay',arr[Index-1].chapter_id)
			},
			
			nextBtn(){
				let Index = this.numIndex;
				let arr = this.playInfo.chapter_list.filter(n=>n.is_buy == 1 || n.free == 1);
				if(Index == arr.length - 1) return;
				this.$emit('switchPlay',arr[Index+1].chapter_id)
			}
		},
		
		computed:{
			...mapState(['vid','bid','color','chapterId','playInfo','times','musicState','current']),
		},
		watch:{
			playInfo:{
				deep:true,
				immediate:true,
				handler(newVal){
					console.log(newVal,'newVal');
					if(!newVal) return;
					let arr = this.playInfo.chapter_list.filter(n=>n.is_buy == 1 || n.free == 1);
				
					let numIndex = arr.findIndex(n=>n.chapter_id == this.chapterId);
					
					this.numIndex = numIndex;
					
					numIndex == 0?this.prev = false:this.prev = true;
					numIndex == arr.length - 1?this.next = false:this.next = true;
					
					if(newVal.chapter_id == this.chapterId && this.musicState) return;
					this.bgAudioManager.pause();
					this.setCurrent(0);
					this.setMusic();
				}
			},
			
			
		},
		
	}
</script>

<style lang="scss" scoped>
	.paly{
		width:100%;
		padding:40rpx 0 60rpx 0;
		background: linear-gradient(to bottom,#e5f0ff,#ffffff);
	}
	.slider{
		width:100%;
		margin:0 !important;
	}
	.Btn{
		width:80rpx;
		height: 80rpx;
		background-color: #333333;
		border-radius: 50%;
		overflow: hidden;
		margin:0 40rpx;
	}
	.Double{
		position: absolute;
		right: 40rpx;
		top:50%;
		transform: translate(0,-50%);
		z-index:88;
	}
	.speed{
		width:58rpx;
	}
	.speedNum{
		position: absolute;
		right: -20rpx;
		top:-20rpx;
	}
	.playImg{
		width:430rpx;
		height: 430rpx;
	}
	
	.select{
		width:24rpx;
		height: 24rpx;
		border-radius: 50%;
		overflow: hidden;
		border:1px solid #666666;
	}
	.selActive{
		border:1px solid var(--color);
		background-color: var(--color);
	}
</style>